<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="productsSearchForm" class="demo-form-inline">
            <el-form-item label="商品id">
                <el-input v-model="productsSearchForm.pid" placeholder="商品id"></el-input>
            </el-form-item>
            <el-form-item label="商品名">
                <el-input  placeholder="商品名" v-model="productsSearchForm.pname" style="width: 100%;"></el-input>
            </el-form-item>

            <el-form-item >
                <el-button type="primary" @click="initTable">搜索</el-button>
                <el-button type="danger" @click="batchDelete">批量删除</el-button>
                <el-button type="success" @click="addProducts">新增</el-button>
            </el-form-item>

<!--            <el-table-column>-->
<!--                <template slot-scope="scope">-->
<!--                <el-button type="success" icon="el-icon-add" @click="addProducts(scope.row)">新增</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-form>

        <el-table
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="pid"
                    label="商品id"
                    >
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="商品名字"
                    >
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="商品价格">
            </el-table-column>
            <el-table-column
                    prop="flag"
                    label="商品状态">
            </el-table-column>
            <el-table-column
                    prop="category.cid"
                    label="类别id">
            </el-table-column>
            <el-table-column
                    prop="category.cname"
                    label="类别名">
            </el-table-column>
            <el-table-column
                fixed="right"
                lable="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="small" icon="el-icon-edit" @click="editProducts(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small"  icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15,20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>



        <el-dialog
                title="添加学生信息"
                :visible.sync="addPro"
                width="30%">
            <el-form ref="form" :model="addProductsForm" label-width="80px" >
                <el-form-item label="商品id">
                    <el-input v-model="addProductsForm.pid"></el-input>
                </el-form-item>
                <el-form-item label="商品名">
                    <el-input v-model="addProductsForm.pname"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="addProductsForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-input v-model="addProductsForm.flag"></el-input>
                </el-form-item>
                <el-form-item label="商品类型id">
                    <el-input v-model="addProductsForm.categoryId"></el-input>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" @click="insertProducts">确认添加</el-button>
                    <el-button @click="addPro=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--编辑的对话框-->
        <el-dialog
                title="修改员工"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form ref="form" :model="editProductsForm" label-width="80px" >
                <el-form-item label="商品名">
                    <el-input v-model="editProductsForm.pname"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="editProductsForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品状态">
                    <el-input v-model="editProductsForm.flag"></el-input>
                </el-form-item>
                <el-form-item label="商品类型id">
                    <el-input v-model="editProductsForm.categoryId"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" >
                    <el-select v-model="editProductsForm.cid" placeholder="请选择">
                        <el-option v-for="item in category"
                                        :key="item.cid"
                                        :label="item.cname"
                                        :value="item.cid"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" @click="updateProducts">确认修改</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</body>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                tableData:[],
                productsSearchForm:{},
                productsVo:{},
                //编辑对话框的显示和隐藏
                dialogVisible:false,
                editProductsForm:{},
                addPro:false,
                addProductsForm:{},
                category:[],
                multipleSelection: [],
                ids:[],
                currentPage:1,
                pageSize:5,
                total:0
            },
            created(){
                this.initTable();
                this.loadAllCategory();
            },

            methods:{
                //批量删除
                batchDelete(){
                    //stream
                    // this.ids=this.multipleSelection.map(item=>item.empno);
                    const arr=this.multipleSelection.map(data => {return data.pid})
                    axios.post("http://localhost:8080/products/batchDelete",arr).then(result=>{
                        if(result.data.code===200){
                            this.$message.success(result.data.msg);
                            //刷新页面
                            this.initTable();
                        }
                    })
                },
                initTable(){
                    axios.post("http://localhost:8080/products/list/"+this.currentPage+"/"+this.pageSize,this.productsSearchForm).
                        then(result =>{                        this.tableData=result.data.data.records;

                        this.total=result.data.data.total;
                    })
                },
                //获取表格被选中的项
                handleSelectionChange(val){
                    console.log(val)
                    this.multipleSelection = val;

                },
                //确认修改员工信息
                updateProducts(){
                    axios.put("http://localhost:8080/products/update",this.editProductsForm).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("修改成功");
                            //关闭对话框
                            this.dialogVisible=false;
                            //刷新页面
                            this.initTable();
                        }
                    });
                },
                addProducts(){
                    this.addPro=true;
                    // this.addProductsForm=row;
                },
                //新增商品
                insertProducts(){
                    // const formData = new FormData();
                    // formData.append("categoryId",this.addProductsForm.categoryId);
                    // formData.append("flag",this.addProductsForm.flag);
                    // formData.append("pid",this.addProductsForm.pid);
                    // formData.append("pname",this.addProductsForm.pname);
                    // formData.append("price",this.addProductsForm.price);
                    axios.post("http://localhost:8080/products/insert",this.addProductsForm).then(result=>{
                        console.log(result)
                        if(result.data.code===200){
                            this.$message.success("添加成功");
                            //关闭对话框
                            this.addPro=false;
                            //刷新页面
                            this.initTable();
                            this.addProductsForm={}
                        }
                    });
                },
                //查询所有班级信息
                loadAllCategory(){
                    axios.get("http://localhost:8080/category/select").then(result=>{
                        this.category= result.data.data;
                        console.log(this.category)
                    })
                },
                handleSizeChange(val) {
                    this.pageSize=val;
                    this.initTable();
                },
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.initTable();
                },
                del(row){
                    let pid=row.pid;
                    axios.delete("http://localhost:8080/products/deleteById/"+pid).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("删除成功") //弹出成功的消息框
                            this.initTable(); //重新加载表格
                        }
                    })
                },

                //编辑员工
                editProducts(row){
                    this.dialogVisible=true;
                    this.editProductsForm=row;

                },

            }

        })
    </script>
</html>